<template>
  <div>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
    </el-upload>

      <el-button type="danger" class="suo">列表显示</el-button>
      <el-button type="primary">缩略图</el-button>

    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">暂无数据</div></el-col>
    </el-row>

      <el-button type="success" plain @click="back" class="suos">提交</el-button>
      <el-button type="info" plain @click="back" class="suos">关闭</el-button>
    

  </div>
</template>

<script>
export default {
    data() {
      return {
        fileList: []
      };
    },
       methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      back(){
        this.$router.back()
      }
    }
}

</script>

<style>
.upload-demo{
  padding:20px ;
  box-sizing: border-box;
  margin-left: 780px;
}
.title{
  padding: 20px;
  box-sizing: border-box;
}
.grid-content{
  height: 200px;
  padding: 10px;
  margin-top: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: rgb(112, 115, 117);
  line-height: 200px;
  border: 1px solid rgb(204, 202, 202);
}
.suo{
  margin-left: 750px;
}
.suos{
  margin-left: 780px;
  margin-top: 100px;
}
</style>
